<template>
  <div class="export-dialog-view" v-loading="pageLoading">
    <div class="export-dialog">
      <div class="title">
        <p>{{ title }}</p>
        <i class="el-icon-close" @click="$emit('CloseExprotDiloag')"></i>
      </div>
      <div class="export-dialog-body">
        <div class="change-time">
          <div class="item">
            <span class="label larger-label">出力内容</span>
          </div>
          <div class="item">
            <span class="label">出力対象：</span>
            <el-radio v-model="outTarget" :label="1" class="radio-option">設備関連情報</el-radio>
            <el-radio v-model="outTarget" :label="2" class="radio-option">損傷要因</el-radio>
          </div>
          <div class="item">
            <span class="label">出力内容：</span>
            <el-radio v-model="excuType" :label="2" class="radio-option">既存データ</el-radio>
            <el-radio v-model="excuType" :label="1" class="radio-option" 
                      :disabled="isBlankSheetDisabled">ブランクシート</el-radio>
          </div>
          <div class="item">
            <span class="label">設備選択：</span>
            <el-radio v-model="SelecType" :label="1" class="radio-option">当該設備のみ</el-radio>
            <el-radio v-model="SelecType" :label="2" class="radio-option">抽出中の全設備</el-radio>
          </div>
        </div>
        <p class="tip">上記の内容で良いですか?</p>
        <div class="footer">
          <el-button @click="$emit('CloseExprotDiloag')">
            Cancel
          </el-button>
          <el-button type="primary" @click="onExportClick()">
            OK
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { ExportDamageCauses, 
  ExportSysViewEquipmentInformation,
  ExportEvaluationViewEquipmentInformation
} from "@/api/api";

export default {
  name: "ViewExportDialog",
  props: {
    title: {
      type: String,
      required: true
    },
    PltCode: {
      type: Number,
      required: true
    },
    Code: {
      type: Number,
      required: true
    },
    CtgCode: {
      type: Number,
      required: true
    },
    LawCode: {
      type: Number,
      required: true
    },
    MacName: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      outTarget: 1,  //"出力対象" 
      excuType: 2,  //"出力内容" 
      SelecType: 1,  //"設備選択" 
      pageLoading: false, 
    };
  },
  computed: {
    isBlankSheetDisabled() {
      return this.title === this.$t('機器評価') && this.outTarget === 1;
    }
  },
  watch: {
    outTarget(newVal) {
      if (newVal === 1 && this.title === this.$t('機器評価')) {
        this.excuType = 2;
      }
    },
    title(newVal) {
      if (this.outTarget === 1 && newVal === this.$t('機器評価')) {
        this.excuType = 2;
      }
    }
  },
  methods: {
    async onExportClick() {
        this.pageLoading = true;
        let res;

        try {
            let macType = 0;
            if (this.title === this.$t('機器評価')) {
                macType = 1;
            } else if (this.title === this.$t('系統情報')) {
                macType = 2;
            }

            let dataJson = {
                PltCode: this.PltCode,
                Code: this.Code,
                SelecType: this.SelecType,
                macType: macType,  
                excuType: this.excuType,
                line: 30,
                CtgCode:this.CtgCode,
                LawCode:this.LawCode,
                MacName:this.MacName,
            };

            if (this.title === this.$t('系統情報')) {
                if (this.outTarget === 1) {
                    res = await ExportSysViewEquipmentInformation(dataJson);
                } else if (this.outTarget === 2) {
                    res = await ExportDamageCauses(dataJson);
                }
            } else if (this.title === this.$t('機器評価')) {
                if (this.outTarget === 1) {
                    res = await ExportEvaluationViewEquipmentInformation(dataJson);
                } else if (this.outTarget === 2) {
                    res = await ExportDamageCauses(dataJson);
                }
            }

            this.pageLoading = false;
            if (res.data.code != 0) {
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                    callback: action => {}
                });
                return;
            } else if (res.data.code == 0) {
                window.open(res.data.data);
            }
        } catch (error) {
            this.pageLoading = false;
            console.error("error", error);
            this.$message.error(error.statusText);
        }

        this.$emit("CloseExprotDiloag");
    },
},

  created() {
    console.log("Title:", this.title);
    console.log("PltCode:", this.PltCode);
    console.log("Code:", this.Code);
  }
};
</script>
<style lang="scss" scoped>
.export-dialog-view {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 6;
}

.export-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 488px;
  padding-bottom: 24px;
  background: #ffffff;
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
    0px 9px 28px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px -8px rgba(0, 0, 0, 0.15);

  .title {
    height: 42px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-size: 16px;

    p {
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
    }

    .el-icon-close {
      cursor: pointer;
    }
  }

  .export-dialog-body {
    width: 100%;
    height: calc(100% - 42px);

    .change-time {
      margin: 0 24px;
      padding: 16px 0 0 0;
      border-bottom: 1px solid #f0f0f0;

      .item {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .label {
          width: 120px; 
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          &.larger-label {
            font-size: 18px;
          }
        }

        .radio-option {
          flex: 1; 
          margin-right: 32px; 
          display: flex;
          align-items: center;
          ::v-deep .el-radio__input.is-checked + .el-radio__label {
            //font-weight: bold;
          }
        }
      }
    }

    .tip {
      margin: 16px 24px 24px 24px;
      font-weight: bold;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
    }

    .footer {
      margin: 0 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      button {
        width: 82px !important;
        height: 32px;
        // background: #ffffff;
        // border: 1px solid #d9d9d9;
        // cursor: pointer;
        line-height: 0;
      }

      button:nth-child(2) {
        margin-left: 16px;
        // color: #ffffff;
        // background: #106ebe;
      }
    }
  }
}
.w-50 {
  width: 50px;
  display: inline-block
}

.orange {
  ::v-deep .el-input__inner {
    background-color: #FEDDB1;
  }
}

.pl20 {
  ::v-deep .el-input__inner {
    width: 120px;
    height: 24px;
    padding-right: 5px;
    padding-left: 25px !important;
  }
}
</style>
